<template>
  <div>
    <input type="text" v-model="user.id" />
    <input type="text" v-model="user.name" />
    <button @click="handleAdd">提交</button>
  </div>
  <ul>
    <li @click="handleDel(item.id)" v-for="item in state.arr" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
import { useDel, useAdd } from './hook/message'
export default {
  setup() {
    const { state, handleDel } = useDel()
    const { user, handleAdd } = useAdd(state)
    return {
      state,
      handleDel,
      user,
      handleAdd,
    }
  },
}
</script>
